<template>
    <div>
        商铺名称: <input type="text" v-model="page.name">
        商铺状态: <select v-model="page.Zid">
            <option value="0">请选择</option>
            <option v-for="a in Xiala" :value="a.zid">{{a.zhuantai}}</option>
        </select>

        <input type="button" value="查询" @click="Show" class="btn btn-success">
         <input type="button" value="重置" @click="Chongzhi"class="btn btn-success">
            <a href="https://localhost:7229/api/Shoop/Exec" style="color: red;">导出</a>
            <table class="table">
                    <thead>
                        <tr>
                            <td>商品名称</td>
                            <td>楼层</td>
                            <td>业主/租户</td>
                            <td>联系电话</td>
                            <td>建筑/室内面积</td>
                            <td>租金(元/平方)</td>
                            <td>商铺状态</td>
                            <td>起租时间</td>
                            <td>操作</td>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="a in data">
                            <td>{{a.shoopName}}</td>
                            <td>{{a.louceng}}</td>
                            <td>{{a.yzName}}</td>
                            <td>{{a.phone.substring(0,3)}}****{{a.phone.substring(7,11)}}</td>
                            <td>{{a.sMianji}}</td>
                            <td>{{a.price}}</td>
                            <td>
                                <span v-if="a.zhuantai=='空置'" style="color: blue;">
                                    {{a.zhuantai}}
                                </span>
                                <span v-else style="color: green;">
                                    {{a.zhuantai}}
                                </span>
                            </td>
                            <td>{{a.times}}</td>
                            <td>
                                <input type="button" value="删除" @click="DeleteShoop(a.sid)">
                                <input type="button" value="修改" @click="UpdateShoop(a.sid)">
                            </td>
                        </tr>
                    </tbody>
            </table>

            当前第{{page.pageindex}}页,共{{index.pageend}}页,共{{index.pagecount}}行,每页{{page.pagesise}}条

            <input type="button" value="首页" @click="fanye(1)">
            <input type="button" value="上一页" @click="fanye(2)">
            <span v-for="a in index.pageend">
                    <input type="button" :value="a" @click="fen(a)">
            </span>
            <input type="button" value="下一页" @click="fanye(3)">
            <input type="button" value="尾页" @click="fanye(4)">

            <input type="number" v-model="page.pageindex"><input type="button" value="跳转" @click="Tiaozhuan">

            <select v-model="page.pagesise" @click="Meiye">
                <option value="1">每页1条</option>
                <option value="3">每页3条</option>
                <option value="5">每页5条</option>
                <option value="7">每页7条</option>
                <option value="10">每页10条</option>
                <option value="20">每页20条</option>
            </select>



    </div>
</template>

<script setup lang="ts">
import {onMounted, ref} from 'vue'
import axios from 'axios'
import { useRoute, useRouter } from 'vue-router'
var router = useRouter();

onMounted(()=>{
    Show()
    Xialas()
})

///修改
const UpdateShoop=(Mid:any)=>{
    router.push({path:'/Update',query:{id:Mid}})
}




///删除
const DeleteShoop=(Mid:any)=>{
    if(!confirm('确认删除吗?'))
{
return;
}
    axios.get("/api/Shoop/LuojiDelete",{params:{id:Mid}}).then(res=>{
                if(res.data>0)
            {
                alert('删除成功')
                Show();
            }
            else
            {
                alert('删除失败')
            }
    })
}


const Xiala=ref([
{
    "zid": 1,
    "zhuantai": "空闲"
  }
])
const Xialas=()=>{
    axios.get("/api/Shoop/ChaZT").then(res=>{
        Xiala.value=res.data;
    })
}


///重置
const Chongzhi=()=>{
    page.value.name="",
    page.value.Zid=0
    
}









const Meiye=()=>{
    page.value.pageindex=1;
    Show();
}

const Tiaozhuan=()=>{
    if(page.value.pageindex<1||page.value.pageindex>index.value.pageend)
{
    alert('超出范围.....');
    return;
}
    Show()
}

const fen=(min:any)=>{
    page.value.pageindex=min;
    Show()
}

const fanye=(mid:any)=>{
        if(mid==1)
    {
        page.value.pageindex=1;
    }
       if(mid==2)
    {
        if(page.value.pageindex>1)
    {
            page.value.pageindex-=1;
    }
       
    }
       if(mid==3)
    { 
            if(page.value.pageindex<index.value.pageend)
        {
             page.value.pageindex+=1;
        }
       
    }
       if(mid==4)
    {
        page.value.pageindex=index.value.pageend;
    }
    Show()
}


const page = ref({
    pageindex:1,
    pagesise:3,
    name:"",
    Zid:0
})

const index  = ref({
    pagecount:0,
    pageend:0

})



const data = ref([
{
      "sid": 2,
      "shoopName": "A101",
      "louceng": "1楼",
      "bianhao": "101",
      "jMianji": "19.00平方米",
      "sMianji": "10.00平方米",
      "price": "1299.00/平",
      "zid": 2,
      "beizhu": "阳光房",
      "times": null,
      "yzName": "张三",
      "phone": "15738179297",
      "luoji": true,
      "zhuantai": "出租中"
    }
])

const Show=()=>{
    axios.get("/api/Shoop/ShowShoop",{params:page.value}).then(res=>{
            data.value=res.data.list;
            index.value.pagecount=res.data.num;
            index.value.pageend=Math.ceil(index.value.pagecount/page.value.pagesise);
    })
}

</script>

<style scoped>

</style>